<template>
  <div class="container">
    <dv-full-screen-container style="width: calc(100% - 200px)!important;left: 200px!important;top:60px">
      <div style="width: calc( 100% - 200px)">
        <!--  头部标题 -->
        <topChart/>
      </div>
      <div class="container-box">
        <div class="left">
          <!-- 今日标记 -->
          <leftChart1/>
          <!-- 今日认证-->
          <leftChart2/>
        </div>
        <div class="center">
          <!-- 当前用户数 -->
          <centerChart1/>
          <!-- 类型占比 -->
          <centerChart2/>
        </div>
        <div class="right">
          <!-- 号码库更新明细 -->
          <rightChart1/>
          <!-- 无感接听更新明细 -->
          <rightChart2/>
          <!-- 拦截明细 -->
          <rightChart3/>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
.container {
  background-image: url("../assets/images/bg.png");
  background-size: 100%;
  height: calc(100vh - 50px);
  width: 100vw;
  box-sizing: content-box;
  overflow: hidden;
  color: #fff;

  .container-box {
    width: 100%;
    //padding: 0 20px;
    position: relative;
    top: 0;

    .left {
      width: 25%;
      position: absolute;
      left: 0px;
      margin-top: 10px;
    }

    .center {
      width: calc(100% - 60%);
      position: absolute;
      left: 26%;
      right: 50%;
      margin: 0 auto;
    }

    .right {
      width: 24%;
      position: absolute;
      right: 195px;
      margin-top: 10px;
    }
  }
}
</style>
